<template>
  <!-- {{ customer }} -->
  <div align="left">
    <el-card style="width: 100%">
      <el-row>
        <el-col :span="8">
          <h2>客户信息</h2>
          <table>
            <tr>
              <td>客户姓名：</td>
              <td>{{ customer.CName }}</td>
            </tr>
            <tr>
              <td>手机号：</td>
              <td>{{ customer.Tel }}</td>
            </tr>
            <tr>
              <td>个人标签：</td>
              <td>{{ customer.Tag }}</td>
            </tr>
            <tr>
              <td>出生日期：</td>
              <td>{{ customer.Birthday.substring(0, 10) }}</td>
            </tr>
            <tr>
              <td>身份证号：</td>
              <td>{{ customer.IdCardNumber }}</td>
            </tr>
            <tr>
              <td>年龄</td>
              <td>{{ customer.CAge }}</td>
            </tr>
            <tr>
              <td>地址：</td>
              <td>{{ customer.CAddress }}</td>
            </tr>
          </table>
        </el-col>
        <el-col :span="8">
          <h2>消费信息</h2>
          <table>
            <tr>
              <td>余额：</td>
              <td style="color: red; font-size: 15px">
                {{ customer.Balance }}
              </td>
            </tr>
            <tr>
              <td>消费金额：</td>
              <td style="color: red; font-size: 15px">
                {{ customer.Consumption }}
              </td>
            </tr>
            <tr>
              <td>累计消费：</td>
              <td style="color: red; font-size: 15px">
                {{ customer.AccumulativeConsumption }}
              </td>
            </tr>
            <tr>
              <td>累计次数：</td>
              <td>{{ customer.CumulativeNumber }}</td>
            </tr>
          </table>
        </el-col>
        <el-col :span="8">
          <h2>账号信息</h2>
          <table>
            <tr>
              <td>账户积分：</td>
              <td>{{ customer.Integral }}</td>
            </tr>
            <tr>
              <td>客户类型：</td>
              <td v-if="customer.CtId == 26">普通客户</td>
              <td v-if="customer.CtId == 27">会员</td>
            </tr>
            <tr>
              <td>账户状态：</td>
              <td v-if="customer.IsFreeze == true">冻结</td>
              <td v-if="customer.IsFreeze == false">正常</td>
            </tr>
          </table>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import axios from "axios";
import type { FormInstance, FormRules } from "element-plus";
import { ElTable } from "element-plus";

axios.defaults.baseURL = "http://localhost:5089/api/";

// 系统路由
const router = useRouter();
// 当前页面路由
const route = useRoute();
const customer = reactive({
  CName: "",
  Tel: "",
  Tag: "",
  Balance: "",
  Integral: "",
  Consumption: "",
  AccumulativeConsumption: "",
  CumulativeNumber: "",
  IsFreeze: true,
  Birthday: "",
  IdCardNumber: "",
  CAge: "",
  CAddress: "",
  CtId: 0,
});

const GetCustomerData = () => {
  let cId = Number(route.query.cId);

  axios.get("Customer/GetCustomerDelital?cId=" + cId).then((res) => {
    let d = res.data;
    customer.CName = d.CName;
    customer.Tel = d.Tel;
    customer.Tag = d.Tag;
    customer.Balance = d.Balance.toFixed(2);
    customer.Integral = d.Integral;
    customer.Consumption = d.Consumption.toFixed(2);
    customer.AccumulativeConsumption = d.AccumulativeConsumption.toFixed(2);
    customer.CumulativeNumber = d.CumulativeNumber;
    customer.IsFreeze = d.IsFreeze;
    customer.Birthday = d.Birthday;
    customer.IdCardNumber = d.IdCardNumber;
    customer.CAge = d.CAge;
    customer.CAddress = d.CAddress;
    customer.CtId = d.CtId;
    //   console.log(res.data);
  });
};

onMounted(() => {
  GetCustomerData();
});
</script>

<style></style>
